<template>
  <div>
    <el-dialog
      title="新增城市商圈价格"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        ref="businessAreaPriceForm"
        :rules="rules"
        :model="businessAreaPriceForm"
        :inline="true"
      >
        <el-row>
          <el-form-item label="批量设置所有商圈：">
            <el-radio-group
              v-model="businessAreaPriceForm.isBusinessAreaPriceAll"
            >
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-row v-if="businessAreaPriceForm.isBusinessAreaPriceAll">
          <el-form-item
            v-for="(city, index) in checkedCityList"
            :key="index"
            :label="city.cityName"
          >
            <el-input
              type="number"
              v-model="businessAreaPriceForm.businessAreaPriceAll[index]"
              placeholder="请输入统一商圈价格"
            />
          </el-form-item>
        </el-row>

        <el-row v-else>
          <el-form-item
            v-for="(cityArea, index) in cityAreaList"
            :key="index"
            :label="cityArea.cityName"
          >
            <el-row>
              <el-select
                v-model="businessAreaPriceForm.businessAreaPriceList[index]"
                :value="index"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="(area, i) in cityArea.areas"
                  :key="i"
                  :label="area.areaName"
                  :value="area.areaCode"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="businessAreaPriceForm.businessAreaPriceAll[index]"
                type="number"
                placeholder="请输入统一商圈价格"
                style="width: 250px"
              />
            </el-row>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="confirm('businessAreaPriceForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["cityCodes", "craftName", "cityList"],
  data() {
    return {
      cityArea: [],
      dialogVisible: false,
      checkedCityLists: [],
      businessAreaPriceForm: {
        // 是否同意设置商圈价
        isBusinessAreaPriceAll: true,
        businessAreaPriceList: [],
        businessAreaPriceAll: []
      },
      rules: {
        businessAreaPriceAll: [
          { required: true, message: "请输入统一商圈价格", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    init() {
      this.getCityAreaList();
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    async getCityAreaList() {
      const { data } = await this.$http.get(
        "hsssystemadmin/v1/businessManagement/getCityAreaList"
      );
      this.cityArea = data;
    },
    confirm() {
      let checkedCityAreas = [];
      let cityAreaPriceAll = [];
      for (let i = 0; i < this.cityCodes.length; i++) {
        let cityCode = this.cityCodes[i];
        let cityAreaPrice = this.businessAreaPriceForm.businessAreaPriceAll[i];
        cityAreaPriceAll.push({ cityCode, cityAreaPrice });
      }
      if (!this.businessAreaPriceForm.isBusinessAreaPriceAll) {
        let areaPriceList = this.businessAreaPriceForm.businessAreaPriceList;
        for (let i = 0; i < areaPriceList.length; i++) {
          let cityCode = this.cityCodes[i];
          let areaCodes = areaPriceList[i];
          let { cityName, areas } = this.cityAreaList.find(
            c => c.cityCode === cityCode
          );
          let checkedArea = areas.filter(a => areaCodes.includes(a.areaCode));
          checkedCityAreas.push({
            cityCode: cityCode,
            cityName: cityName,
            areas: checkedArea
          });
        }
        this.$emit("func", checkedCityAreas, cityAreaPriceAll);
      } else {
        checkedCityAreas = this.cityArea;
        this.$emit("func", checkedCityAreas, cityAreaPriceAll);
      }
      this.dialogVisible = false;
    },
    removeAreaCode(cityCode, areaCode) {
      let index = this.cityCodes.indexOf(cityCode);
      if (index > -1) {
        let i = this.businessAreaPriceForm.businessAreaPriceList[index].indexOf(
          areaCode
        );
        if (i > -1) {
          this.businessAreaPriceForm.businessAreaPriceList[index].splice(i, 1);
        }
      }
    }
  },
  computed: {
    checkedCityList() {
      let cityCodes = this.cityCodes;
      return this.cityList.filter(c => cityCodes.includes(c.cityCode));
    },
    cityAreaList() {
      let cityCodes = this.cityCodes;
      return this.cityArea.filter(area => cityCodes.includes(area.cityCode));
    }
  },
  watch: {
    cityCodes: function() {
      this.businessAreaPriceForm.businessAreaPriceList = [];
      this.businessAreaPriceForm.businessAreaPriceAll = [];
    }
  }
};
</script>

<style scoped>
.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
</style>
